<!DOCTYPE html>
<html id="csstyle" ng-app="csstyle">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
  <title>csstyle  Clean, Simple Styling for the Web</title>
  <link href='http://fonts.googleapis.com/css?family=Source+Code+Pro:300' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="site.css">
  <link rel="icon" type="image/png" href="/common/images/favicon-196x196.png" sizes="196x196">
  <link rel="icon" type="image/png" href="/common/images/favicon-160x160.png" sizes="160x160">
  <link rel="icon" type="image/png" href="/common/images/favicon-96x96.png" sizes="96x96">
  <link rel="icon" type="image/png" href="/common/images/favicon-16x16.png" sizes="16x16">
  <link rel="icon" type="image/png" href="/common/images/favicon-32x32.png" sizes="32x32">
</head>
<body class="@home">
  <section class="section --pitch">
    <div class="logo +text-center">
      <span class="logo__dashes">--</span><span class="logo__cs">cs</span>style
    </div>

    <div>
      <div class="tagline +content-center +text-center"><span class="+highlight">clean</span>, <span class="+highlight">simple</span> <span style="">styling</span> for the <span class="+highlight">web</span></div>
      <p class="+content-center +text-center">csstyle is a modern approach for crafting <span class="+highlight">beautifully maintainable</span> stylesheets.
        Keeping CSS clean and organized is really hard. csstyle provides a higher-level abstraction for writing modular CSS. It supports both <a href="http://sass-lang.com/">Sass</a> and <a href="https://github.com/postcss/postcss">Postcss</a>. It makes your CSS readable and semantic, generates your selectors for you, and automatically handles things like specificity and nesting. <br/>
        csstyle makes your project's styling <span class="+highlight">refreshingly consistent</span>
      </p>
    </div>
  </section>

<!-- components -->
<section class="section --white">
  <div class="+content-center">
    <h1 class="section__title">Components</h1>
    <p>With csstyle you organize your CSS as reusable <span class="+highlight">components</span>.</p>  

<example id="components-example">

<span class="section__label">HTML</span>
<pre class="html" highlight="0,10,0,16"><a class="button">Neat!</a></pre>

<span class="section__label">SCSS</span>
<pre class="scss" highlight="0,9,0,26">@include component(button) {
  background: #6BD9ED;
  padding: 15px;
}</pre>

<span class="section__label">RESULT</span>
<div class="section__result">
  <style></style>
  <a class="button">Neat!</a>
</div>

</example>
  <p>Components are the primary building blocks of your project, the more you leverage them the better.</p>

  <p>csstyle's focus on components make it a perfect match for
  Web/Angular/Ember/React components. Tip: create a separate file for each component to make them easy to find & edit.
  </p>
  </div>
</section>



<!-- options -->
<section class="section --darkgrey">
  <div class="+content-center">
    <h1 class="section__title">Options</h1>
    <p>Make your components super flexible with <span class="+highlight">options</span>, 
    passed as arguments to the component. Options override the component's default styling.</p>
<example id="options-example">

<span class="section__label">HTML</span>
<pre class="html" highlight="0,17,0,25">
<a class="button --action">
  Register Now
</a></pre>
</pre>

<span class="section__label">SCSS</span>
<pre class="scss" highlight="4,11,4,25">@include component(button) {
  background: #6BD9ED;
  padding: 15px;

  @include option(action){
    color: #1F1F1F;
    background: #A7E040;
  }
}</pre>

<span class="section__label">RESULT</span>
<div class="section__result">
  <style>
    #options-example .button{
      padding: 15px;
    }
  </style>
  <a class="button --action">Register Now</a>
</div>

</example>
  <p>Component options are a great way to organically grow your CSS over time. 
  When you go to style something you can often just add a new option to an existing component. Code reuse FTW.</p>
  </div>
<!-- <p>Go ahead and try it! Add another option, for example "warning" or "confirm".</p> -->
</section>



<!-- parts -->
<section class="section --pitch">
  <div class="+content-center">
    <h1 class="section__title">Parts</h1>
    <p>Components are composed of <span class="+highlight">parts</span>
    &mdash; child elements of the component that can be styled. Parts are very flexible. They can 
    nest in other parts, react to component options, or even have their own dedicated options. 
    Parts are applied using the component name followed by __ and the part name.</p>
<example id="parts-example">

<span class="section__label">HTML</span>
<pre class="html" highlight="2,15,2,27 2,28,2,36">
<a class="button --action">
  Register Now
  <span class="button__icon --rocket"></span>
</a></pre>

<span class="section__label">SCSS</span>
<pre class="scss" highlight="10,11,10,21 15,13,15,27">@include component(button) {
  background: #6BD9ED;
  padding: 15px;

  @include option(action){
    color: #1F1F1F;
    background: #A7E040;
    padding-top: 0;
  }

  @include part(icon){
    font-size: 34px;
    position: relative;
    top: 10px;

    @include option(rocket){
      &:before {
        content: "\e600";
      }
    }
  }
}</pre>

<span class="section__label">RESULT</span>
<div class="section__result">
  <style></style>
  <a class="button --action">
    Register Now
    <span class="button__icon --rocket"></span>
  </a>
</div>

</example>
  <p>Parts make it easy to break complex components up into manageable chunks.</p>
  </div>
</section>




<!-- tweaks -->
<section class="section --white">
  <div class="+content-center">
    <h1 class="section__title">Tweaks</h1>
    <p>Create generic style <span class="+highlight">tweaks</span> 
    that can be applied to any component instance, part, element, etc.
    Tweaks are applied using a + sign followed by the tweak name.
    Tweaks automatically override the styling of components, options, and parts.</p>
<example id="tweaks-example">

<span class="section__label">HTML</span>
<pre class="html" highlight="0,26,0,34 0,35,0,41">
<a class="button --action +rounded +glass">
  Register Now
  <span class="button__icon --rocket"></span>
</a></pre>

<span class="section__label">SCSS</span>
<pre class="scss" highlight="0,9,0,23 4,9,4,21">@include tweak(rounded) {
  border-radius: 10px;
}

@include tweak(glass) {
  box-shadow: inset 0 0 6px rgba(0,0,0,.8), 
              inset 0 9px 1px rgba(0,0,0,.1);
}</pre>

<span class="section__label">RESULT</span>
<div class="section__result">
  <style></style>
  <a class="button --action +rounded +glass">
    Register Now
    <span class="button__icon --rocket"></span>
  </a>
</div>

</example>
  <p>Tweaks further promote clean organization and style reuse. Refactor common/duplicate styles out of
  components and into tweaks. A tweak should generally produce a single, composable effect.</p>
  </div>
</section>

<section class="@tryit section --pitch">
  <div class="+content-center">
    <h1 class="section__title">Try It!</h1>
    <p>To get started just import csstyle, add an <span class="+highlight">id="csstyle"</span> to your body tag (or configure csstyle to use an id you already have) and you're set.</p> 
    
    <p>You can also customize csstyle to use whichever symbols you prefer.</p>
    
    <p>You'll be pleasantly suprised how much better these simple building blocks make writing CSS. Happy styling!</p>

    <div class="+text-center">
      <a class="button --action +rounded +glass" href="https://github.com/geddski/csstyle#getting-started">
        Get Started
        <span class="button__icon --download"></span>
      </a>
      
      <a class="+space-medium" href="https://github.com/geddski/csstyle">
        contribute on github
      </a>

      <p>Many thanks to <a href="http://www.divshot.com/">Divshot</a> for the sweet hosting.</p>

      <p>Crafted with <span class="+lowlight"><3</span> by Dave Geddes <a href="https://twitter.com/geddski">@geddski</a></p>
    </div>
  </div>
</section>

  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
  <script> angular.module('csstyle', []); </script>
  <script src="common/js/example.js"></script>
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-47572159-2', 'auto');
    ga('send', 'pageview');

  </script>
  
</body>
</html>
